<template>
	<div class="page-wrap">
		<div class="page-tit" @click="tableDataInit" >案例列表 </div>
		<div class="page-content">
			<div class="page-column">
				<!-- 表格搜索区域 -->
				<div class="search-box">
					<div class="search-left">
						<el-button
							type="primary"
							class="m-r-12"
							size="medium"
							icon="el-icon-circle-plus"
							@click="addFun"
						>新增</el-button>
					</div>
					<div class="search-right"></div>
				</div>
				<!-- 表格区域 -->
				<div class="table-box">
					<el-table height="100%" v-loading="loading" :data="tableData.columnData">
						<el-table-column prop="batchid" label="案例Id" align="center" min-width="200"></el-table-column>
						<el-table-column prop="batchname" label="案例名称" align="center" min-width="200"></el-table-column>
						<el-table-column prop="batchstate" label="案例状态" align="center" min-width="200"></el-table-column>
						<el-table-column label="操作" align="center" min-width="150" fixed="right">
							<template slot-scope="scope">
								<el-dropdown @command="handleCommand" :style="{'margin-right':'15px'}">
									<span
										:class="[scope.row.batchstate=='提交' ||scope.row.batchstate=='计算'?'active':'el-dropdown-link']"
										class="el-dropdown-link"
									>编辑</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item
											:command="'1,'+scope.row.batchid+','+scope.row.caidantype"
											:disabled="scope.row.batchstate=='提交' ||scope.row.batchstate=='计算'"
											icon="el-icon-plus"
										>基本模块</el-dropdown-item>
										<el-dropdown-item
											:command="'2,'+scope.row.batchid+','+scope.row.caidantype"
											:disabled="scope.row.batchstate=='提交' ||scope.row.batchstate=='计算'"
											icon="el-icon-circle-plus"
											v-if="scope.row.caidantype>1"
										>早期模块</el-dropdown-item>
										<el-dropdown-item
											:command="'3,'+scope.row.batchid+','+scope.row.caidantype"
											:disabled="scope.row.batchstate=='提交' ||scope.row.batchstate=='计算'"
											icon="el-icon-circle-plus-outline"
											v-if="scope.row.caidantype>2"
										>长期模块</el-dropdown-item>
										<el-dropdown-item
											:command="'4,'+scope.row.batchid+','+scope.row.caidantype"
											:disabled="scope.row.batchstate=='提交' ||scope.row.batchstate=='计算'"
											icon="el-icon-check"
											v-if="scope.row.caidantype>2"
										>食入模块</el-dropdown-item>
										<el-dropdown-item
											:command="'5,'+scope.row.batchid+','+scope.row.caidantype"
											:disabled="scope.row.batchstate=='提交' ||scope.row.batchstate=='计算'"
											icon="el-icon-circle-check"
										>敏感度分析</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<el-button
									:disabled="scope.row.batchstate=='提交' ||scope.row.batchstate=='计算' ||scope.row.batchstate=='完成' || scope.row.batchstate=='失败'"
									type="text"
									@click="count(scope.row)"
								>计算</el-button>
								<el-button
									:disabled="scope.row.batchstate=='空闲' ||scope.row.batchstate=='提交' ||scope.row.batchstate=='计算' || scope.row.batchstate=='失败'"
									type="text"
									@click="resultsShow(scope.row)"
								>展示</el-button>
								<!-- <el-button
									type="text"
									@click="resultsShow(scope.row)"
								>展示</el-button>-->
								<el-button
									:disabled="scope.row.batchstate=='计算'"
									type="text"
									@click="deleteFun(scope.row)"
								>删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<!-- 表格相关操作组件区域 -->
		<tempAdd ref="add" @refresh="clickQuery"></tempAdd>
	</div>
</template>

<script>
import advanceQuery from "@/components/advanceQuery"
import commCheckbox from "@/components/commCheckbox"
import textLength from "@/components/textLength"
import selectPara from "@/components/selectPara"

import { mapState } from "vuex"
import tempAdd from "./tempAdd"

import { BATCH_SEARCH, BATCH_DELETE, BATCH_CALCULATE } from "@/service/hd5.js"

export default {
	name: "tempList",
	components: {
		advanceQuery,
		tempAdd,
		commCheckbox,
		textLength,
		selectPara,
	},
	data() {
		return {
			showSearch: false,
			tableData: {
				// 表格绑定对象
				orders: "",
				columns: "",
				pageSize: 15,
				currentPage: 1,
				total: 0,
				columnData: [{}],
			},
			searchForm: {
				nameLike: "",
			},
			selection: [],
			loading: false,
			show: false,
		}
	},
	created() {
		this.clickQuery()
	},
	computed: {
		...mapState({
			token: (state) => state.token.token,
		}),
	},
	mounted() {
		this.setData()
	},
	methods: {
		setData() {
			let tempDATA = {}
			this.$store.dispatch("upData_basic_Data", tempDATA)
			this.$store.dispatch("upData_early_Data", tempDATA)
			this.$store.dispatch("upData_longterm_Data", tempDATA)
			this.$store.dispatch("upData_ingestion_Data", tempDATA)
			this.$store.dispatch("upData_senstivity_Data", tempDATA)
		},
		handleCommand(command) {
			let temp = command.split(",")
			if (temp[0] == "1") {
				this.setBasicModule(temp[1],temp[2])
			} else if (temp[0] == "2") {
				this.setEarlyModule(temp[1],temp[2])
			} else if (temp[0] == "3") {
				this.setLongTermModule(temp[1],temp[2])
			} else if (temp[0] == "4") {
				this.setIngestionModule(temp[1],temp[2])
			} else if (temp[0] == "5") {
				this.setSensitivityModule(temp[1],temp[2])
			}
			// if(command)
		},
		setBasicModule(row,type) { 
			this.$router.push({
				path: "/basicModule",
				query: { id: row, caidantype:type},
			})
		},
		setEarlyModule(row,type) {
			this.$router.push({
				path: "/earlyModule",
				query: { id: row, caidantype:type },
			})
		},
		setLongTermModule(row,type) {
			this.$router.push({
				path: "/longtermModule",
				query: { id: row ,caidantype:type},
			})
		},
		setIngestionModule(row,type) {
			this.$router.push({
				path: "/ingestionModule",
				query: { id: row ,caidantype:type},
			})
		},
		setSensitivityModule(row,type) {
			this.$router.push({
				path: "/sensitivitySet",
				query: { id: row,caidantype:type},
			})
		},
		resultsShow(row,type) { 
			this.$router.push({
				path: "/resultsShow",
				query: { id: row.batchid,caidantype:type},
			})
		},
		detailFun(row) {
			// 明细方法
			this.$refs.detail.showLayout(row)
		},
		addFun() {
			// 新增按钮
			this.$refs.add.showLayout()
		},
		editFun(row) {
			// 编辑方法
			this.$refs.edit.showLayout(row)
		},
		clickQuery() {
			// 搜索按钮
			this.tableData.currentPage = 1
			this.tableDataInit()
		},
		advanceQuery() {
			// 高级搜索按钮
			this.tableData.currentPage = 1
			this.tableDataInit()
			this.toggleShow()
		},
		toggleShow() {
			// 切换显示高级查询
			this.selTableVisible = false
			this.showSearch = !this.showSearch
		},
		resetForm() {
			// 重置按钮
			this.$refs.searchForm.resetFields()
			this.tableDataInit()
		},
		tableDataInit() {
			this.loading=true
			// 列表数据请求
			let params = {
				batchname: "",
			}
			this.$appApi
				.BATCH_SEARCH(params)
				.then((res) => {
					var str = res.data.substring(0, 1)
					if (str == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
						})
					} else if (str == "S") {
						this.loading=false
						this.tableData.columnData = JSON.parse(
							res.data.substring(8)
						)
					}
				})
				.catch((err) => {
					console.log(err)
					this.tableData.columnData = [
						{
							name: "",
						},
					]
				})
		},
		count(row) {
			let confirmMsg = "确认计算选中案例？"
			this.$confirm(confirmMsg, {
				type: "warning",
				title: "提示",
			})
				.then(() => {
					let params = {
						batchid: row.batchid,
					} 
					this.$appApi
						.BATCH_CALCULATE(params)
						.then((res) => { 
							var str = res.data.substring(0, 1)
							if (str == "E") {
								let message = res.data.substring(6)
								this.$notify.error({
									title: "请求失败！",
									message: message,
								})
							} else if (str == "S") {
								this.tableDataInit()
							}
						})
						.catch((err) => {
							console.log(err)
						})
				})
				.catch(() => {})
		},
		deleteFun(row) {
			// 单选删除

			let confirmMsg = "确认删除选中数据？删除后将不能恢复！"
			this.$confirm(confirmMsg, {
				type: "warning",
				title: "提示",
			})
				.then(() => {
					let params = {
						batchid: row.batchid,
					} 
					this.$appApi
						.BATCH_DELETE(params)
						.then((res) => {
							console.log(res)
							var str = res.data.substring(0, 1)
							if (str == "E") {
								let message = res.data.substring(6)
								this.$notify.error({
									title: "删除失败！",
									message: message,
								})
							} else if (str == "S") {
								this.$notify({
									title: "提示",
									type: "success",
									message: "删除成功",
								})
								this.tableDataInit()
							}
						})
						.catch((err) => {
							console.log(err)
						})
				})
				.catch(() => {})
		},
	},
}
</script>

<style scoped>
.el-dropdown-link {
	cursor: pointer;
	color: #5e7ce0;
}
.active {
	color: #adb0b8;
}
.page-tit{
	height: 50px;
	line-height: 50px;
	padding-left: 25px;
}
</style>